<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <title>WebSocket Logger</title>
    <link rel="stylesheet" th:href="@{/static/qrcodes.css}" />
    <link rel="stylesheet" th:href="@{/static/bootstrap-3.3.7/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/static/table/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/table/bootstrap-table.css}">
    <link rel="stylesheet" th:href="@{/static/css/font-awesome.min.css}"  >

    <link rel="stylesheet" type="text/css" th:href="@{/static/daterangepicker/daterangepicker.css}" />
    <script type="text/javascript" th:src="@{/static/gamebar_Admin_files_in/jquery-1.7.2.js}"></script>
    <script th:src="@{/static/daterangepicker/moment.js}"></script>
    <script th:src="@{/static/daterangepicker/daterangepicker.js}"></script>
   <!-- <link rel="stylesheet" th:href="@{/static/qrcodes.css}" />-->
    <!--    <link rel="stylesheet" th:href="@{/static/table/button.css}">-->
</head>
<body style="width: 99%">
<div class = "pg_header">
    <span class="pg_dl" id="i77" th:align="center">数据统计列表</span>
</div>
<br><br><br>
<div>
    <form class="form-inline">
    <select id="factoryName_form" class="form-control">
        <option value="0">微盟云谷平台</option>
        <option th:each="c:${factoryList}"  th:value="${c.factoryId}" th:text="${c.factoryName}"></option>
    </select>
    <select id="state_form" class="form-control" style="width: 200px">
        <option value="">请选择</option>
        <option value="3">成功</option>
        <option value="1">失败</option>
    </select>
    <input id="deviceId_form" class="form-control" placeholder="设备编号"/>
    <!--<input id="createTime_form" class="form-control" placeholder="操作时间"/>-->
        <button type="button" class="btn btn-default" id="daterange-btn" style="width: 200px">
            <span id="creatime_form">
            <i class="icon iconfont icon-calendar1"></i>操作时间
            </span>
            <i class="icon iconfont icon-danxian-youjiantou-copy"></i>
        </button>

        <input type="button" class="btn-primary btn-sm" value="统计" onclick="searchInfo()">
    </form>
    <br>
</div>
<table id="YourTable" class="table table-bordered">
    <thead>
    <tr>
        <th data-field="billId" data-align="center">工单编号</th>
        <th data-field="factoryName" data-align="center">厂商名称</th>
        <th data-field="creatime" data-align="center" data-width="210px">操作时间</th>
        <th data-field="operator" data-align="center" >操作员工</th>
        <th data-field="deviceId" data-align="center" >设备编号</th>
        <th data-field="caseId" data-align="center">二维码编号</th>
        <th data-field="state" data-align="center" data-formatter="statusInit">操作结果</th>
        <th data-formatter="addButton" data-events="operateEvents" data-align="center" data-width="130px"><div style="width:130px">操作</div></th>
    </tr>
    </thead>
</table>

<script type="text/javascript">
    $('.ranges_1 ul').remove();
    $('#daterange-btn').daterangepicker({
            ranges: {
                '清空': [moment(), moment().subtract(-1, 'days')],
                '今天': [moment(), moment()],
                '明天': [moment().subtract(-1, 'days'), moment().subtract(-1, 'days')],
                '未来七天': [moment(),moment().subtract(-6, 'days')],
                '未来30天': [moment(),moment().subtract(-29, 'days')],
                '未来60天': [moment(),moment().subtract(-59, 'days'), ]
            },
            startDate: moment(),
            endDate: moment()
        },
        function(start, end,label) {
            //label:通过它来知道用户选择的是什么，传给后台进行相应的展示
            console.log(label)
            if(label=='清空'){
                $('#daterange-btn span').html('操作时间');
            }else if(label=='今天'){
                $('#daterange-btn span').html(start.format('YYYY/MM/DD'));
            }else if(label=='明天'){
                $('#daterange-btn span').html(start.format('YYYY/MM/DD'));
            }else if(label=='未来七天'){
                $('#daterange-btn span').html(start.format('YYYY/MM/DD')+'-'+end.format('YYYY/MM/DD'));
            }else if(label=='未来30天'){
                $('#daterange-btn span').html(start.format('YYYY/MM/DD')+'-'+end.format('YYYY/MM/DD'));
            }else if(label=='未来60天'){
                $('#daterange-btn span').html(start.format('YYYY/MM/DD')+'-'+end.format('YYYY/MM/DD'));
            }
        }
    );
</script>

<script th:src="@{/static/table/jquery.min.js}"></script>
<script th:src="@{/static/table/bootstrap-table.js}"></script>
<script th:src="@{/static/table/bootstrap-table-zh-CN.js}"></script>
<script th:src="@{/static/appJs/workOrderMag.js}"></script>
</body>
</html>
